<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>签到window</title>
		<link rel="stylesheet" text="text.css" href="../../css.api.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/base.css"/>
		<link rel="stylesheet" href="../../css/CFNetPP_Base.css">
		<style type="text/css">
			.historySign {
				clear: left;
				widows: 100%;
				height: 32px;
				font-size: 12px;
				color: #C1C1C1;
				padding-left: 10px;
				vertical-align: bottom;
				padding-top: 12px;
				background-color: #FFFFFF;
			}
			.base_add_icon {
				height: 20px;
				position: absolute;
				top: 50%;
				right: 15px;
				margin-top: -11px;
			}
			input[class=now] {
				width: 45px;
				height: 45px;
				text-align: center;
				border: 1px #cccccc solid;
			}
			.now:focus {
				border: 1px #587d18 solid;
			}
			.btndiv {
				margin: 0 20%;
				margin-top: 60px;
			}
			#signName {
				width: 100%;
				height: 40px;
				padding-top: 100px;
				text-align: center;
				color: #666666;
				font-size: 14px;
			}
			.beginSign {
				width: 100%;
				height: 45px;
				line-height: 45px;
				background-color: #F3F6F6;
				color: #999999;
				text-align: center;
				vertical-align: middle;
				font-size: 16px;
			}
			.section {
				width: 100%;
				height: 60px;
				position: relative;
				border: 1px solid #F1F0F1;
				background-color: #FFFFFF;
			}
			.signName {
				position: absolute;
				width: 100%;
				height: 18px;
				font-size: 14px;
				color: #222222;
				left: 10px;
				top: 10px;
			}
			.signTime {
				position: absolute;
				width: 60%;
				height: 20px;
				color: #ACACAC;
				font-size: 12px;
				top: 34px;
				left: 10px;
			}
			.signStateFrame {
				position: absolute;
				width: 16px;
				height: 16px;
				right: 60px;
				top: 33px;
			}
			.signStateImg {
				width: 16px;
				height: 16px;
			}
			.signStateFont {
				position: absolute;
				right: 10px;
				width: 40px;
				height: 16px;
				color: #ACACAC;
				font-size: 12px;
				top: 32px;
			}
			.mui-table-view-cell {
				width: 100%;
				height: 60px;
				position: relative;
				/* border: 1px solid #F1F0F1; */
				background-color: #FFFFFF;
			}
			.shuoming {
				font-size: 12px;
				color: #999999;
				text-align: left;
				width: 100%;
				height: 30px;
				vertical-align: middle;
				background-color: #FFFFFF;
				padding-top: 5px;
				/* padding-bottom: 5px; */
				padding-left: 20px;
				padding-right: 20px;
				line-height: 12px;
			}
			#main {
				border: solid 1px #dedede;
			}
			.load-more-div {
				height: 40px;
				background-color: white;
			}
			.load-more-cell {
				line-height: 40px;
				text-align: center;
			}
			.signTab{
				text-align:center;
				padding-top: 20px;
			}
			.signTab>p{
				font-size: 12px;
				color: #333;
				line-height: 1;
			}
			.methodul{
				margin-top: 40px;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.methodul>.item{
				margin: 0 10px;
				width: 142px;
				height: 40px;
				line-height: 40px;
				border-radius: 5px;
				background: #EDEDED;
				font-size: 14px;
				color: #333;
				list-style: none;
			}
			.methodul>.item.active{
				background: #EB4350;
				color: #fff;
			}
			.sign_queding{
				width: 389px;
				max-width: calc(100% - 30px);
				height: 46px;
				line-height: 46px;
				font-size: 14px;
				color: #fff;
				margin: 45px auto 0;
				border-radius: 8px;
				background: #EB4350;
			}
		</style>
	</head>
	<body>
		<div id="signSection" style="width: 100%;height: 255px;background-color: white;text-align: center;">
			<div id="signName">
				暂无签到
			</div>
			<div id="signBorder" style="background-color: #222222;width: 150px;height: 150px;margin-top: 40px;margin-left: 30%;border-radius: 75px;text-align: center;position: relative; display: none" >
				<div style="background-color:white;width: 130px;height: 130px;border-radius: 65px;position: absolute;top:10px;left: 10px;text-align: center;" >
					<div id="signTime" style="color: #222222;font-size: 30px;position: absolute;top:45px;left: 0px;width:130px;text-align: center;font-weight: bold;"></div>
					<div id="signText" style="color: #222222;font-size: 16px;position: absolute;top:80px;left: 0px;width:130px;text-align: center;"></div>
				</div>
			</div>
			<!-- 选择签到方式 -->
			<div class="signTab" style="display: none">
				<p>请选择签到方式</p>
				<ul class="methodul">
					<li class="item">输入签到码</li>
					<li class="item">扫描二维码</li>
				</ul>
				<div class="sign_queding">确定</div>
			</div>
			<div class="codeDiv" style="display: none">
				<div class="btndiv" >
					<input type='tel' name='code[]' class='now' maxlength="1"   onkeyup="value=value.replace(/[^\d]/g,'')"/>
					<input type='tel' name='code[]' class='now' maxlength="1"  onkeyup="value=value.replace(/[^\d]/g,'')"/>
					<input type='tel' name='code[]' class='now' maxlength="1"  onkeyup="value=value.replace(/[^\d]/g,'')"/>
					<input type='tel' name='code[]' class='now' maxlength="1"  onkeyup="value=value.replace(/[^\d]/g,'')"/>
				</div>
				<div>
					<Button onclick="loadQrcodData('',0)">
						签到
					</Button>
				</div>
			</div>
		</div>
		<div class="historySign">
			历史签到记录
		</div>
		<div class="historySign_frame" >
			<div id="main"></div>
			<div class="load-more-div" style="display: none">
				<p class="load-more-cell base_dark_grey_shallow base_content_font"  onclick="loadMoreData()">
					点击加载更多
				</p>
			</div>
			<div class="noSign"   id="noData"  hidden="hidden">
				<img src="../../image/icon_img.png" width="60%">
				<p class="font16 top_15 base_dark_grey" >
					暂无数据
				</p>
			</div>
			<div class="loadFailure"  id="noNet" hidden="hidden">
				<img src="../../image/icon_img01.png" width="60%">
				<p class="" >
					数据加载失败
				</p>
				<p>
					请检查您的网络
				</p>
				<button type="button" class="mui-btn mui-btn-outlined" onclick="RefreshData()">
					重新加载
				</button>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../../script/api.js"></script>
	<script type="text/javascript" src="../../script/MD5.js"></script>
	<script type="text/javascript" src="../../script/requestTool.js"></script>
	<script type="text/javascript" src="../../script/jquery.min.js"></script>
	<script type="text/javascript" src="../../script/common.js"></script>
	<script type="text/javascript" src="../../script/push.js"></script>
	<script type="text/javascript" src="../../script/timeStampTool.js"></script>
	<script>
		$("body").on("click",".methodul .item",function(){
			$(".methodul>.item").removeClass('active');
			$(this).addClass('active');
		})
		//选择签到方式后确定
		$("body").on("click",".sign_queding",function(){
			if($(".methodul>.item:nth-child(1)").hasClass('active')){
				$(".signTab").hide();
				$(".codeDiv").show();
			}
		})
	</script>
	<script type="text/javascript">
		var signId = 0;
		var signName = "";
		var tmpArr = [];
		//存进行中的id
		var page = 1;
		var row = 10;
		var dataSource = [];
		var refreshCount = 0;
		apiready = function() {
			loadNewData();
			sendBuriedNotifi('0', '学生端签到页', '175');
			setInterval(function() {
				$('#signTime').html(getCurrentTime());
			}, 1000);
			preUIData();
			ReceNotifi();
			getNewSignMessage();
			setRefreshHeader()
		}
		function sendBuriedNotifi(busionessid, pagetype, pagetypeid) {
			var userinfo = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				uname : $api.getStorage('cfnetppusername'),
			};
			var data = {
				busionessid : busionessid,
				pagetype : pagetype,
				pagetypeid : pagetypeid,
				sourceurl : api.pageParam.sourceurl,
				sourcetitle : api.pageParam.sourcetitle,
				accesspageurl : window.location.pathname,
				accesspagetitle : document.title,
				userinfo : userinfo
			}
			SendBehaviorTrajectoriesNotifi_Study(data);
		}
		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				getNewSignMessage();
			});
		}

		//预加载ui数据
		function preUIData() {
			$('#signTime').html(getCurrentTime());
			//签到圆圈设置水平居中
			$('#signBorder').css('margin-left', (api.winWidth - 150) / 2);
			prepareData();
		}

		//接受消息推送
		function ReceNotifi() {
			api.addEventListener({
				name : 'pushMessage_classroomMessage'
			}, function(ret, err) {
				if (QD_TYPE == ret.value.type && $api.getStorage('cfnetppjxid') == ret.value.jid) {
					if (ret.value.status == 1) {
						signId = ret.value.id;
						signName = ret.value.name;
						haveSign();
					} else {
						haveNoSign();
					}
				}
			});
			api.addEventListener({
				name : 'openQrodeNotifi'
			}, function(ret, err) {
				loadQrcodData(ret.value.content, ret.value.type)
			});
		}

		//下拉刷新
		function setRefreshHeader() {
			api.setRefreshHeaderInfo({
				visible : true,
				bgColor : '#ccc',
				textColor : '#fff',
				textDown : '下拉刷新...',
				textUp : '松开刷新...',
				showTime : true
			}, function(ret, err) {
				getNewSignMessage();
			});
		}

		//输入框预加载数据
		function prepareData() {
			var regPos = / ^\d+$/;
			// 非负整数
			$('.now').keyup(function() {
				if ($(this).index() < 4) {
					var val = $(this).val();
					if (isNumber(val) && !isEmpty(val)) {//是数字才跳出
						$(this).next('input').focus();
					}
				}
			});
		}

		//设置每个input的内容为空
		function inputEmpty() {
			//			$("input[name='code[]']").each(function(i) {
			//				$(this).value = ''
			//			});
			$(".btndiv").find("input[name='code[]']").val("");
		}

		//得到数字验证码
		function getVerificationCode() {
			var demo = '';
			$("input[name='code[]']").each(function(i) {
				demo += $(this).val();
			});
			return demo;
		}

		//开始签到
		function loadQrcodData(content, type) {
			var qrcode = "";
			if (type == 1) {//二维码扫描
				qrcode = content;
			} else {//数字验证码
				qrcode = getVerificationCode();
			}
			if (isEmpty(qrcode)) {
				ShowToast('请输入验证码');
				return false;
			}
			if (qrcode.length < 4) {
				ShowToast('请输入4位数字验证码');
				return false;
			}
			var params = {
				iid : signId, //互动id
				uid : $api.getStorage('cfnetppuid'), //$api.getStorage('cfnetppuid'),  //学生id
				tid : 1, //互动类型
				qrcode : qrcode,
			};
			showProgress();
			cfnetppPOST(url_stuSignYesNo, params, false, function(data, status) {
			SendBusinessOperationsLogNotifi('学生签到', '175', params, params, '', data, '学生签到接口', '175-01')
				hideProgress();
				if (status == 'success') {
					$('#noNet').hide();
					if (data.code == 200) {
						ShowToast(data.remind);
						if (type == 1) {//
							$('.codeDiv').hide();
						}
						SignSuccess();
						inputEmpty();
						api.sendEvent({
							name : 'signSuccess',
						});
					} else if (data.code == 108) {//已结束
						ShowToast(data.message);
					} else if (data.code == 107) {//不支持签到
						ShowToast(data.message);
					} else if (data.code == 109) {//签到失败
						ShowToast(data.message);
					} else if (data.code == 101) {//参数错误
						ShowToast(data.message);
					} else {//签到已结束
						ShowToast(data.message);
					}
					changeSignShare();
				} else {
					ShowToast("老师还没有开始签到");
					changeSignShare();
					haveNoSign();
				}
			});
		}

		//存在签到活动
		function haveSign() {
			// $('.codeDiv').show();
			$('.signTab').show();
			$('#scan_div').show();
			$('#signBorder').hide();
			$('#signName').html(signName);
			$('#signName').css("color", "#222222");
			$('#signName').css("padding-top", "25px");
			$('#signBorder').css("background-color", "#18b4de");
			$('#signTime').html(getCurrentTime());
		}

		//签到成功
		function SignSuccess() {
			$('.codeDiv').hide();
			$('.signTab').hide();
			$('#signBorder').show();
			$('#signName').css("padding-top", "25px");
			$('#signName').html(signName);
			$('#signName').css("color", "#222222");
			$('#signBorder').css("background-color", "#18b4de");
			$('#signTime').html(getCurrentTime());
			$('#signText').html("签到成功");
			$('#signText').css("color", "#222222");
			loadNewData();
		}

		//没有签到
		function haveNoSign() {
			$('.codeDiv').hide();
			$('.signTab').hide();
			$('#scan_div').hide();
			$('#signBorder').hide();
			$('#signName').html("暂无签到");
			$('#signName').css("color", "#666666");
			$('#signName').css("padding-top", "100px");
			$('#signBorder').css("background-color", "#999999");
			$('#signTime').html(getCurrentTime());
		}

		function loadNewData() {
			dataSource = [];
			page = 1;
			loadFrameData();
		}

		function loadMoreData() {
			page++;
			loadFrameData();
		}

		//获取到最新一条数据
		function getNewSignMessage() {
			var jid = $api.getStorage('cfnetppjxid');
			var params = {
				tid : 1,
				jid : jid,
				uid : $api.getStorage('cfnetppuid'),
				rows : 1,
				cid : api.pageParam.cid,
				pid : api.pageParam.pid,
			}
			cfnetppPOST(url_stuGetActivelist, params, false, function(data, status) {
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					if (data.code == 200) {
						if (!isObjectEmpty(data.data)) {
							inputEmpty();
							if (data.data[0].activestatus == 1) {//签到开启状态
								if (data.data[0].userstatus == 1) {//未签到
									signId = data.data[0].id;
									signName = data.data[0].name;
									haveSign();
									api.sendEvent({
										name : 'havesignNotifi',
									});
								} else {
									haveNoSign();
									api.sendEvent({
										name : 'haveNosignNotifi',
									});
								}
							} else {
								haveNoSign()
								api.sendEvent({
									name : 'haveNosignNotifi',
								});
							}
						}
					}
				} else {
				}
			})
		}

		//签到列表
		function loadFrameData() {
			var params = {
				uid : $api.getStorage('cfnetppuid'),
				jid : $api.getStorage('cfnetppjxid'),
				tid : 1,
				page : page, //互动类型
				rows : row, //恰当拿到状态
				cid : api.pageParam.cid,
				pid : api.pageParam.pid,
			};
			//			popu(params);
			cfnetppPOST(url_stuGetActivelist, params, true, function(data, status) {
				hideProgress();
				api.refreshHeaderLoadDone();
				if (status == 'success') {
					$('#noNet').hide();
					$('#noData').hide();
					$('#main').show();
					if (data.code == 200) {
						var dataPost = data.data;
						refreshCount = dataPost.length;
						if (dataPost != '' && dataPost.constructor == Array && dataPost.length > 0) {
							$('#noData').hide();
							$('#noNet').hide();
							$('#main').show();
							if (dataPost.length > 3) {
								$('.load-more-div').show();
							}
							for (var i = 0; i < dataPost.length; i++) {
								dataSource.push(dataPost[i]);
							}
							initState(dataPost);
						} else {
							if (page == 1) {
								$('#noData').show();
								$('#noNet').hide();
							}
						}
					}else if(data.code==109){
						api.alert({msg:"您未加入该课程,暂无法签到"});
						api.closeWin();
					} else if (data.code == 108) {
						if (page == 1) {
							$('#noData').show();
							$('#noNet').hide();
							$('#main').hide();
						} else {
							ShowToast('暂无更多数据哦');
							$('.load-more-div').hide();
							$('#noData').hide();
							$('#noNet').hide();
						}
					} else {
						if (page == 1) {
							$('#noData').show();
							$('#noNet').hide();
							$('#main').hide();
						} else {
							ShowToast('暂无更多数据哦');
							$('.load-more-div').hide();
							$('#noData').hide();
							$('#noNet').hide();
						}
					}
				} else {
					if (page == 1) {
						$('#noData').hide();
						$('#noNet').show();
						$('#main').hide();
					} else {
						$('#noData').hide();
						$('#noNet').show();
						$('#main').hide();
						$('.load-more-div').hide();
					}
				}
			});
		}

		function initState(data) {
			var str = '';
			tmpArr = [];
			if (data.length > 0) {
				for (var i = 0; i < data.length; i++) {
					if (data[i].activestatus == 1)
						tmpArr.push(data[i]);
				}
			}
			var signYesOrNo = 0;
			var signName = "";
			for (var i = 0; i < data.length; i++) {
				var item = data[i];
				var timeStr = "";
				if (item.starttime != null && item.starttime.length > 0 && item.starttime != 0) {
					timeStr = timeWithStamp3(item.starttime);
				} else {
					timeStr = timeWithStamp3(item.createtime);
				}
				var status = '';
				if (item.userstatus == 1) {
					status = "未签到";
				} else if (item.userstatus == 2) {
					status = "已签到";
				} else if (item.userstatus == 3) {
					status = "缺勤";
				} else if (item.userstatus == 4) {
					status = "事假";
				} else if (item.userstatus == 5) {
					status = "病假";
				} else if (item.userstatus == 6) {
					status = "迟到";
				} else if (item.userstatus == 7) {
					status = "早退";
				}
				if (item.activestatus == 1 && item.userstatus != 1) {
					if (item.userstatus == 1) {//未签到
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/queqin.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 2) {//已签到
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/yiqiandao.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 3) {//缺勤
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/queqin.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 4) {//事假
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/shijia.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 5) {//病假
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/bingjia.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 6) {//迟到
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/chidao.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 7) {//早退
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/zaotui.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					}
				}
				if (item.activestatus == 2) {
					if (item.userstatus == 1) {//未签到
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/queqin.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 2) {//已签到
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/yiqiandao.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 3) {//缺勤
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/queqin.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 4) {//事假
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/shijia.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 5) {//病假
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/bingjia.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 6) {//迟到
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/chidao.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					} else if (item.userstatus == 7) {//早退
						str += '<div class="mui-table-view-cell"><div class="signName">' + item.name + '</div><div class="signTime">' + timeStr + '</div><div class="signStateFrame"> <img class="signStateImg" src="../../image/zaotui.png" alt=""></div><div class="signStateFont">' + status + '</div></div>';
					}
				}
			}
			if (page == 1) {
				$('#main').html(str);
			} else {
				$('#main').append(str);
			}
		}

		//		function closeWin() {
		//			api.closeWin();
		//		}
		//红点的隐藏
		function changeSignShare() {
			var jid = $api.getStorage('cfnetppjxid');
			//签到成功,赋值为没有签到
			$api.setStorage('cfnetppmessageclassroom' + jid + QD_TYPE, "0");
		}
	</script>
</html>